<!--订单-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>订单</title>
    <link rel="stylesheet" href="/hotel/css/layui.css">
    <link rel="stylesheet" href="/hotel/css/bootstrap.min.css">
    <link href="/hotel/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
    <link href="/hotel/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    
    <style>
        input{
            display: inline-block !important;
        }
        a:link{
            text-decoration:none;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">MISS后台管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    username
                </a>
            </li>
            <li class="layui-nav-item"><a href="">注销</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                <li class="layui-nav-item">
                    <a href="index.html">首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">散客开单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Guests_check_in.html">宾客入住</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item  layui-nav-itemed">
                    <a href="javascript:;">订单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Order.html" style="background-color: #1E90FF">所有订单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">宾客结账</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Ordinary_invoicing.html">结账</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">预定管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Query_book.html">查询预定</a></dd>
                        <dd><a href="Add_a_reservation.html">添加预定</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">营业查询</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Check-in_guest_enquiry.html">入住宾客查询</a></dd>
                        <dd><a href="Member_of_the_query.html">会员查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">系统设置</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Data_management.html">数据管理</a></dd>
                        <dd><a href="VIP_set_up.html">VIP设置</a></dd>
                        <dd><a href="Billing_Settings.html">计费设置</a></dd>
                        <dd><a href="Set_up_the_room.html">房间设置</a></dd>
                        <dd><a href="Operator_setup.html">操作员设置</a></dd>
                    </dl>
                </li>
                 <li class="layui-nav-item">
                    <a href="javascript:;">订单信息</a>
                    <dl class="layui-nav-child">
                    <dd><a href="javascript:void(0);" onclick="tan()">查看订单信息</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div style="padding: 15px;">
            <h1>订单</h1>
                <input id="input1" type="text" class="form-control" name="name" placeholder="输入姓名或完整订单号搜索" style="width: 300px">
            	<button class="layui-btn layui-btn-radius layui-btn-primary" onclick="findByName()">查找</button>
            	<button class="layui-btn layui-btn-radius layui-btn-primary" onclick="reloadPage()">显示全部订单</button>
            <br/>
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="200">
                    <col width="150">
                    <col width="150">
                </colgroup>
                <thead>
                <tr>
                    <th>订单号</th>
                    <th>房间类型</th>
                    <th>宾客姓名</th>
                    <th>宾客身份证</th>
                    <th>订单状态</th>
                    <th>详细信息</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tbody1">
                <tr>
                    <td>001</td>
                    <td>标准房</td>
                    <td>郑杰</td>
                    <td>510xxxxxxxxxxxxx</td>
                    <td>未入住</td>
                    <td><a href="OrderMes.html">查看</a></td>
                    <td>
                        <button onclick="openRoom()">入住</button>
                        <button onclick="offRoom()">退房</button>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © MISS酒店
    </div>
</div>
 <div class="modal fade" id="webSocketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog" style="height: 300px">
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">订单信息</h4>
      </div>
      <div class="modal-body" style="height: 300px">
        <div class="form-group" style="float: left;"></br>
			 <textarea id="message_content" class="form-control" readonly="readonly" cols="80" rows="10"></textarea>
		</div>
       </div>
    </div>
  </div>
</div><!-- /.modal -->
<script src="/hotel/js/layui.all.js"></script>
<script src="/hotel/js/jquery.min.js"></script>
<script src="../bt/modal.js"></script>
<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.min.js"></script>
<script>
function tan(){
	$("#webSocketModal").modal('show')
}
function findAll(){
	$.ajax({
		url:"/order",
        type:"get",
        async:true,
        success:function (mes){
        	console.info(mes)
        	var str="";
        	for(var a=0;a<mes.length;a++){
        		for(var b=0;b<mes[a].ocb.length;b++){
        			str+="<tr><td>"+mes[a].orderNumber+"</td><td>"+mes[a].ocb[b].roomtype.name+"</td><td>"+mes[a].ocb[b].guestId.name+"</td><td>"+mes[a].ocb[b].guestId.idCard+"</td><td>"+mes[a].status+"</td><td><a onclick='findMes("+mes[a].id+")'>查看</a></td>";
        			if(mes[a].status=="未入住"){
        				str+="<td><button onclick='openRoom("+mes[a].id+")'>入住</button></td></tr>";
        			}else if(mes[a].status=="已入住"){
        				str+="<td><button onclick='offRoom("+mes[a].id+","+mes[a].ocb[b].roomId.id+")'>退房</button></td></tr>";
        			}else{
        				str+="</tr>";
        			}
        		}
        	}
        	$("#tbody1").html(str);
        }
	});
}
function findByName(){
	var mm=JSON.stringify($('#input1').serializeJSON());
	var opt = $('#input1').val()
	var tes = /^[0-9]+$/
	var findUrl;
	var ty = "post";
	if(tes.test(opt)){
		mm = JSON.stringify({"orderNumber":opt})
		findUrl="/order/orderid";
	}else{
		findUrl="/order/guest/searchByName"
	}
		
	
	$.ajax({
		url:findUrl,
        type:ty,
        async:true,
        data:mm,
        contentType:"application/json;charset=utf-8",
        dataType:"json",
        success:function(mes1){
        	console.info(mes1)
        	var str1="";
        	for(var c=0;c<mes1.length;c++){
        		for(var d=0;d<mes1[c].ocb.length;d++){
        			str1+="<tr><td>"+mes1[c].orderNumber+"</td><td>"+mes1[c].ocb[d].roomtype.name+"</td><td>"+mes1[c].ocb[d].guestId.name+"</td><td>"+mes1[c].ocb[d].guestId.idCard+"</td><td>"+mes1[c].status+"</td><td><a onclick='findMes("+mes1[c].id+")'>查看</a></td>";
        			if(mes1[c].status=="未入住"){
        				str1+="<td><button onclick='openRoom("+mes1[c].id+")'>入住</button></td></tr>";
        			}else if(mes1[c].status=="已入住"){
        				str1+="<td><button onclick='offRoom("+mes1[c].id+","+mes1[c].ocb[d].roomId.id+")'>退房</button></td></tr>";
        			}else{
        				str1+="</tr>";
        			}
        		}
        	}
        	$("#tbody1").html(str1);
        }
	});
}
function findMes(value){
	window.location.href="OrderMes.html?id="+value;
}
function reloadPage(){
	  location.reload();
	}
findAll();
</script>
<script>
    function openRoom(oid1){
        var c = confirm("亲，您确定现在入住吗？");
        if (c == true) {
            window.location.href="index.html?id="+oid1;
        }
    }
</script>
<script>
    function offRoom(oid2,rid2){
        var a = confirm("亲，您确定要退房吗？");
        if (a == true) {
            window.location.href="Ordinary_invoicing.html?oid="+oid2+"&rid="+rid2;
        }
    }
</script>
<script type="text/javascript">

var websocket = null;
//浏览器是否支持
if ('WebSocket' in window) {
  // 上面我们给webSocket定位的路径
  websocket = new WebSocket('ws://localhost:8080/webSocket');
} else {
  alert('该浏览器不支持websocket!');
}
//建立连接
websocket.onopen = function (event) {
  console.log('建立连接');
				
}
//关闭连接
websocket.onclose = function (event) {
  console.log('连接关闭');
}
//消息来的时候的事件
websocket.onmessage = function (event) {
  // 这里event.data就是我们从后台推送过来的消息
  console.log('收到消息:' + event.data);
  $('#message_content').append(event.data+'\n');
  // 在这里我们可以在页面中放置一个音乐，例如“您有新的订单了！”这样的提示音
  	document.getElementById("myAudio").play();
}

//发生错误时
websocket.onerror = function () {
  alert('websocket通信发生错误！');
}
//窗口关闭时，Websocket关闭
window.onbeforeunload = function () {
  websocket.close();
}

</script>
<audio src="../video/dingdong.mp3"  id="myAudio" ></audio>
</body>
</html>